// 创建一个组件，就是一个函数。类似于js中的构造函数
function Home(){
    function add(x,y){return x+y}
    // 1,jsx中所有的标签打印都是对象结构，对应虚拟dom树节点
    const div1 = <div id="d1">div1</div>
    console.log(div1);

    // 2,如果标签结构嵌套比较复杂，可以在最外层添加()，支持换行
    const div2 = (
    <ul>
        {/* 3,标签内部的注释，要写在花括号及多行注释 */}
        {/* 4，单层花括号用于在标签内部渲染动态数据 */}
        <li>{div1}</li>
        <li>{add(3+4)}</li>
        <li>{new Date().toLocaleString()}</li>
        <li>{Math.random()>0.5 ? "正确" : "错误"}</li>
    </ul>
    )
        // 5，由于html中的class属性和js中的class类关键字重名，使用className设置class属性
            //  由于html中的for属性和js中的js类关键字重名，使用htmlFor设置class属性
        const div3 = <div className="card"></div>
        const form =<form action="">
            <label htmlFor="myinput">账号</label>
            <input type="text" id="myinput"/>
        </form>

        // 6，react条件渲染
        // 方式一：使用if/else实现组件模板的条件渲染
        var bool = true
        // if (bool) {
        //     return <div>bool值存在时的模板</div>
        // }else{
        //     return <div>bool值存在时的模板</div>
        // }
        // 一般用在ajax请求完成前，判断数据为空，暂时渲染空模板
        // if(!data) return null  //建议加上这句判断
        // return <div>{data.list[0].count}</div>

        // 方式二：如果只有模板中个别标签需要条件渲染，建议使用三目运算
        // return <div>
        //     <section>呦西</section>
        //     {
        //     bool? 
        //     <div>bool值存在时的模板</div> 
        //     : 
        //     <div>bool值存在时的模板</div>
        //     }
        // </div>

        // 方式3：如果没有在模板渲染前判断数据的存在性，可以在渲染时使用 && 语句判断
        // return <div>{data.list && data.list[0].count}</div>

        // var a=0 && 2 //前边为true，返回后边的值，前边为false，返回前边的值


        // 7，循环 
        var arr = [1,2,3,4,5,6,7]
        // return <ul>{arr}</ul> 不能直接渲染一个数据数组
        // react中需要把数据数组映射为标签数组，然后渲染
      arr = arr.map(item=>{
        // map数组循环映射时，return的标签必须设置key属性
            return <li key={item}>{item}</li>
        })
        return <ul>{arr}</ul>


        // 8，动态属性绑定，使用{}绑定动态属性值，注意不加 " "
        var div5 = <div className={myclass}></div>


        // 9,事件绑定
        function add() {}
        var btn = <button onClick={add}>点我</button>




    // 函数返回的是组件模板
    return <div>
        主页 - {div2} - {form} - {btn}
        </div>
}
// 导出
export default Home